import { ref, computed } from 'vue'
export const getIndexImg = (url) => {
  return new URL(`../../../assets/index/${url}`, import.meta.url).href;
};
export function useDevice () {
  const devices = ref({
    nodes: [
      // 路由器
      {
        id: "router-1",
        data: {
          label: "主路由器",
          deviceName: "Cisco 2900系列路由器",
          ip: "192.168.1.1",
          width: 110,
          height: 100,
          img: getIndexImg('topology1.png'),
          type: 'router'
        },
      },
      {
        id: "router-2",
        data: {
          label: "备用路由器",
          deviceName: "Huawei AR2200路由器",
          ip: "192.168.1.2",
          width: 110,
          height: 100,
          img: getIndexImg('topology1.png'),
          type: 'router'
        },
      },
      // 核心交换机
      {
        id: "core-switch-1",
        data: {
          label: "核心交换机A",
          deviceName: "H3C S6850交换机",
          ip: "192.168.2.1",
          width: 110,
          height: 100,
          img: getIndexImg('topology2.png'),
          type: 'core-switch'
        },
      },
      // 接入交换机
      {
        id: "access-switch-1",
        data: {
          label: "接入交换机1",
          deviceName: "TP-Link SG2428P交换机",
          ip: "192.168.3.1",
          width: 110,
          height: 100,
          img: getIndexImg('topology3.png'),
          type: 'access-switch'
        },
      },
      // 工作站
      {
        id: "workstation-1",
        data: {
          label: "设计工作站",
          deviceName: "Dell Precision 5820",
          ip: "192.168.4.1",
          width: 110,
          height: 100,
          img: getIndexImg('topology4.png'),
          type: 'workstation'
        },
      },
      // 服务器
      {
        id: "server-1",
        data: {
          label: "Web服务器",
          deviceName: "Dell PowerEdge R740",
          ip: "192.168.5.1",
          width: 110,
          height: 100,
          img: getIndexImg('topology5.png'),
          type: 'server'
        },
      },
      {
        id: "server-2",
        data: {
          label: "数据库服务器",
          deviceName: "HPE ProLiant DL380",
          ip: "192.168.5.2",
          width: 110,
          height: 100,
          img: getIndexImg('topology5.png'),
          type: 'server'
        },
      },
      // 防火墙
      {
        id: "firewall-1",
        data: {
          label: "主防火墙",
          deviceName: "FortiGate 600E",
          ip: "192.168.6.1",
          width: 110,
          height: 100,
          img: getIndexImg('topology6.png'),
          type: 'firewall'
        },
      },
      // 负载均衡器
      {
        id: "load-balancer-1",
        data: {
          label: "负载均衡器",
          deviceName: "F5 BIG-IP 1600",
          ip: "192.168.7.1",
          width: 110,
          height: 100,
          img: getIndexImg('topology7.png'),
          type: 'load-balancer'
        },
      },
      // 网络存储
      {
        id: "network-storage-1",
        data: {
          label: "NAS存储",
          deviceName: "Synology RS3618xs",
          ip: "192.168.8.1",
          width: 110,
          height: 100,
          img: getIndexImg('topology8.png'),
          type: 'network-storage'
        },
      },
      // 虚拟网络
      {
        id: "virtual-network-1",
        data: {
          label: "VM网络",
          deviceName: "VMware ESXi集群",
          ip: "192.168.9.1",
          width: 110,
          height: 100,
          img: getIndexImg('topology9.png'),
          type: 'virtual-network'
        },
      },
      // 网络设备
      {
        id: "network-device-1",
        data: {
          label: "VPN设备",
          deviceName: "Juniper SRX340",
          ip: "192.168.10.1",
          width: 110,
          height: 100,
          img: getIndexImg('topology10.png'),
          type: 'network-device'
        },
      },
      // 网络接口
      {
        id: "network-interface-1",
        data: {
          label: "千兆接口",
          deviceName: "Intel X550-T2网卡",
          ip: "192.168.11.1",
          width: 110,
          height: 100,
          img: getIndexImg('topology11.png'),
          type: 'network-interface'
        },
      },
      // 网络协议
      {
        id: "network-protocol-1",
        data: {
          label: "TCP/IP协议",
          deviceName: "网络协议栈",
          ip: "192.168.12.1",
          width: 110,
          height: 100,
          img: getIndexImg('topology12.png'),
          type: 'network-protocol'
        },
      }
    ],
    edges: [
      // 路由器连接核心交换机
      { id: "router-1->core-switch-1", source: "router-1", target: "core-switch-1" },
      // 核心交换机连接接入交换机
      { id: "core-switch-1->access-switch-1", source: "core-switch-1", target: "access-switch-1" },
      // 接入交换机连接工作站
      { id: "access-switch-1->workstation-1", source: "access-switch-1", target: "workstation-1" },
      // 核心交换机连接服务器
      { id: "core-switch-1->server-1", source: "core-switch-1", target: "server-1" },
      { id: "core-switch-1->server-2", source: "core-switch-1", target: "server-2" },
      // 路由器连接防火墙
      { id: "router-1->firewall-1", source: "router-1", target: "firewall-1" },
      // 防火墙连接负载均衡器
      { id: "firewall-1->load-balancer-1", source: "firewall-1", target: "load-balancer-1" },
      // 负载均衡器连接服务器
      { id: "load-balancer-1->server-1", source: "load-balancer-1", target: "server-1" },
      // 服务器连接网络存储
      { id: "server-1->network-storage-1", source: "server-1", target: "network-storage-1" },
      // 虚拟网络连接
      { id: "server-2->virtual-network-1", source: "server-2", target: "virtual-network-1" },
      // 网络设备连接
      { id: "router-2->network-device-1", source: "router-2", target: "network-device-1" },
      // 网络接口连接
      { id: "core-switch-1->network-interface-1", source: "core-switch-1", target: "network-interface-1" },
      // 网络协议连接
      { id: "router-1->network-protocol-1", source: "router-1", target: "network-protocol-1" }
    ],
  })

  const deviceTypes = ref([
    { id: 1, name: '路由器', icon: getIndexImg('icon1.png'), type: 'router' },
    { id: 2, name: '核心交换机', icon: getIndexImg('icon2.png'), type: 'core-switch' },
    { id: 3, name: '接入交换机', icon: getIndexImg('icon3.png'), type: 'access-switch' },
    { id: 4, name: '工作站', icon: getIndexImg('icon4.png'), type: 'workstation' },
    { id: 5, name: '服务器', icon: getIndexImg('icon5.png'), type: 'server' },
    { id: 6, name: '防火墙', icon: getIndexImg('icon6.png'), type: 'firewall' },
    { id: 7, name: '负载均衡器', icon: getIndexImg('icon7.png'), type: 'load-balancer' },
    { id: 8, name: '网络存储', icon: getIndexImg('icon8.png'), type: 'network-storage' },
    { id: 9, name: '虚拟网络', icon: getIndexImg('icon9.png'), type: 'virtual-network' },
    { id: 10, name: '网络设备', icon: getIndexImg('icon10.png'), type: 'network-device' },
    { id: 11, name: '网络接口', icon: getIndexImg('icon11.png'), type: 'network-interface' },
    { id: 12, name: '网络协议', icon: getIndexImg('icon12.png'), type: 'network-protocol' },
  ])

  const selectedDevice = ref(null)

  const addDevice = (deviceType) => {
    const newDevice = {
      id: Date.now(),
      name: deviceType.name,
      type: deviceType.type,
      icon: deviceType.icon,
      x: 400,
      y: 300,
      ip: '192.168.1.' + (devices.value.length + 1),
      lastUpdate: new Date().toLocaleString(),
    }
    devices.value.push(newDevice)
  }

  const selectDevice = (device) => {
    selectedDevice.value = device
  }

  const closePanel = () => {
    selectedDevice.value = null
  }

  const startDrag = (device, event) => {
    const startX = event.clientX
    const startY = event.clientY
    const initialX = device.x
    const initialY = device.y

    const onMouseMove = (e) => {
      const dx = e.clientX - startX
      const dy = e.clientY - startY
      device.x = initialX + dx
      device.y = initialY + dy
    }

    const onMouseUp = () => {
      window.removeEventListener('mousemove', onMouseMove)
      window.removeEventListener('mouseup', onMouseUp)
    }

    window.addEventListener('mousemove', onMouseMove)
    window.addEventListener('mouseup', onMouseUp)
  }

  const filteredDevices = computed(() => {
    return devices.value
  })

  return {
    devices,
    deviceTypes,
    addDevice,
    selectDevice,
    selectedDevice,
    closePanel,
    startDrag,
    filteredDevices,
  }
}